<template>
	<view class="search-page">
		<view class="search-wrapper  fixed">
		  <view class="search-box ">
		    <text class="iconfont icon-sousuo"></text>
		    <input class="input"
				focus="true"
				:placeholder="placeholder" 
				placeholder-style="color:#999;" 
				confirm-type="search" 
				:value="inputValue" @input="input" @confirm="search"></input>
		    <text class="iconfont icon-cha1" v-show="inputValue != ''" @tap="clearInput"></text>
		  </view>
		  <view class="btn" :style="'color:' + mobile_head_color + ';'" @tap="search"><lang keywords="搜索"></lang></view>
		</view>
		
		<view class="hot-search" v-if="hotList.length > 0">
			<view class="little-title"><lang keywords="热门搜索" chineseTxt="热门搜索"></lang></view>
			<view class="list">
				<view class="item" v-for="(item, index) in hotList" @tap="clickHotKey(index)">{{item.name}}</view>
			</view>
		</view>
		
		<view class="search-history">
			<view class="little-title"><lang keywords="搜索历史" chineseTxt="搜索历史"></lang></view>
			<view class="list">
				<view class="item" v-for="item in historyList" @tap="goSearch(item)">{{item}}</view>
				<view class="item bottom" v-show="historyList.length == 0"><lang keywords="暂无记录" chineseTxt="暂无记录"></lang></view>
				<view class="item bottom" v-show="historyList.length > 0" @tap="clearHistory"><lang keywords="清除搜索记录" chineseTxt="清除搜索记录"></lang></view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	var _this
	var app = getApp()
	export default {
		data () {
			return {
				placeholder: '请输入搜索关键字',
				inputValue: '',
				mobile_head_color: '',
				hotList: [],
				historyList: []
			}
		},
		mounted () {
			_this = this
			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color
			})
			_this.placeholder = common.changeTxt(_this.placeholder)
			
			_this.getHotKey()
			let historyList = uni.getStorageSync('plat_search_Key')
			_this.historyList = historyList ? JSON.parse(historyList) : []
		},
		methods: {
			clickHotKey (index) {
				if (_this.hotList[index].go_url) {
					common.parseUrl(_this.hotList[index].go_url)
				} else {
					_this.goSearch(_this.hotList[index].name)
				}
			},
			input (e) {
				console.log('input', e);
				_this.inputValue = e.detail.value
			},
			search (e) {
				console.log('点击搜索', e)
				if (!_this.inputValue) {
					return
				}
				if (JSON.stringify(_this.historyList).indexOf(_this.inputValue) == -1) {
					_this.historyList.unshift(_this.inputValue)
					uni.setStorageSync('plat_search_Key', JSON.stringify(_this.historyList))
				}
				_this.goSearch(_this.inputValue)
				_this.inputValue = ''
			},
			goSearch (key) {
				app.globalData.platSearchKey = key
				wx.navigateTo({
					url: '/pages/index/searchList'
				})
			},
			clearHistory () {
				uni.removeStorageSync('plat_search_Key')
				_this.historyList = []
			},
			clearInput () {
				_this.inputValue = ''
			},
			getHotKey () {
				common.post('Search&a=index', {}, (data) => {
					console.log('热门搜索关键字', data)
					_this.hotList = data
				})
			}
		}
	}
</script>

<style scoped>
	.search-page{height: 100%;box-sizing: border-box;padding-top: 45px;}
	
	.search-wrapper{padding:5px 10px;display: flex;background: #fff;border-bottom: 1px solid #f4f4f4;}
	.search-wrapper.fixed{position: fixed;top: 0;left: 0;right: 0;z-index: 999;}
	.search-wrapper .search-box{border-radius: 4px;border: 1px solid #f2f2f2;border-radius: 5rpx;font-size: 15px;color: #333;display: flex;align-items: center;padding: 10px 0 10px 10px;box-sizing: border-box;height: 35px;flex: 1;}
	.search-wrapper .search-box .input{flex: 1;padding: 0 10px;}
	.search-wrapper .search-box .icon-sousuo{color: #999;font-size: 15px;}
	.search-wrapper .search-box .icon-cha1{color: #999;padding: 20rpx;}
	.search-wrapper .btn{font-size: 15px;color: #06c1ae;height: 35px;line-height: 35px;margin-left: 10px;}
	
	.little-title{font-size: 16px;color: #b2b2b2;padding: 20px 10px 0;}
	.hot-search .list{display: flex;flex-wrap: wrap;padding-left: 10px;}
	.hot-search .list .item{font-size: 12px;color: #7e7e7e;padding: 8px 0;text-align: center;width: -webkit-calc(33.333333% - 10px);width: calc(33.333333% - 10px);margin: 10px 10px 0 0;background: #fff;}
	
	.search-history .little-title{padding-bottom: 10px;}
	.search-history .list{background: #fff;padding: 0 10px;}
	.search-history .list .item{border-bottom: 1px solid #f2f2f2;padding: 10px 0;font-size: 14px;}
	.search-history .list .item.bottom{border: none;color: #7e7e7e;text-align: center;}
</style>
